<template> 
<view>
	<view class="container">
		<image v-if="user.avatar!=null" :src="user.avatar" class="image" @click="editAvatar"></image>
		<image v-else src="../../static/tabs/my.png" mode="aspectFit" class="image" @click="editAvatar"></image>
		<text>{{ user.nickName || '昵称' }}</text>
	</view>
	 
	<uni-list class="list">
		<uni-list-item title="个人中心" link to="/pages/version1/personalCenter_v1" />
 		<uni-list-item title="好友列表" link to="/pages/version1/friendsList" />
	</uni-list>
	
	<!-- 用户登出按钮 -->
	<button class="logout-button" @click="logout">退出账号</button>
</view>
</template> 

<script>  
import {hasLogin, logout, getUserid} from '@/store/index.js'

export default {  
	data() {  
		return {
			user:{
				userId: '',
				nickName: '', // 用户昵称
				avatar: null, // 用户头像URL
			},
			
		};
	},  
	onLoad() {
	    if (hasLogin()) {
			// 发起请求获取用户信息
			let userInfoStr = uni.getStorageSync("userInfo");
			if (userInfoStr) {
			    let userInfo = JSON.parse(userInfoStr);
				this.user.userId = userInfo.userId || '';
			    this.user.nickName = userInfo.nickName || '';
		        this.user.avatar = userInfo.avatar || '';
			}
	    }
	},
	methods: {
		editAvatar() {
			// 在这里添加处理头像编辑的逻辑
			console.log("正在编辑头像...");
			// 例如，可以导航到一个编辑头像的页面
			uni.navigateTo({
				url: '/pages/version1/headPhoto_v1'
			});
		},
		logout() {
		    // 在这里执行退出登录的操作，比如清除用户信息等
			// 清除本地存储的用户信息示例：
			// localStorage.removeItem('userToken');
			localStorage.removeItem('userInfo');

			// 在这里可以跳转到登录页面或其他适当的页面
			uni.navigateTo({
				url: '/pages/version1/log_on_v1'
			});

			// 可以给用户一个反馈
			alert('已退出登录');
		}
	}
};  
</script>  
  
<style scoped>
.image{
	width: 225rpx;
	height: 225rpx;
	margin-top: 100rpx;
	margin-left: 100rpx;
	border-radius: 7rpx;
}
.container {  
    display: flex;           /* 使用弹性布局 */  
    flex-direction:row;   
    align-items: center;     /* 垂直居中 */  
    margin-left: 15%;
    height: 100%;            /* 假设容器占据整个可用高度 */  
    /* 根据需要添加其他样式，如背景色、边框等 */  
}  
  
.avatar {  
    width: 160rpx;             /* 设置图片宽度 */  
    height: 160rpx;           /* 设置图片高度 */  
    border-radius: 50%;     /* 设置为圆形 */  
    margin-top: 20%;
}  
  
text {  
    margin-top: 20%;       /* 添加与图片之间的间距 */  
    font-size: 60rpx;
	margin-left: 5%;
}
	
.list{
	margin-top: 30px;
}

.list .uni-list-item{
	height: 50px
}
 
.logout-button {
	margin: 80% 10% 20% 10%;
	padding: 10px 20px;
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	height: 120rpx;
}
</style>
